<template>
	<div class="p-4">
		<BasicTable
			@register="registerTable"
			@edit-end="handleEditEnd"
			@edit-cancel="handleEditCancel"
			:beforeEditSubmit="beforeEditSubmit"
		/>
	</div>
</template>
<script lang="ts">
import { defineComponent, h } from 'vue';
import { BasicTable } from '#/components';
import { demoListApi } from '@/api/demo/table';
import { useMessage } from '@/hooks/web/useMessage';
import { Progress } from 'ant-design-vue';
import { getBigTypes, getPrincipaltree } from '@/api/demo';
import { BasicColumn } from '@/basicComp/types';
import { useTable } from '@/basicComp/hooks';

const columns: BasicColumn[] = [
	{
		title: '输入框',
		dataIndex: 'name',
		edit: true,
		editComponentProps: {
			prefix: '$',
		},
		width: 200,
	},
	{
		title: '默认打开输入状态',
		dataIndex: 'name7',
		edit: true,
		editable: true,
		width: 200,
	},
	{
		title: '输入框校验',
		dataIndex: 'name1',
		edit: true,
		// 默认必填校验
		editRule: true,
		width: 200,
	},
	{
		title: '输入框函数校验',
		dataIndex: 'name2',
		edit: true,
		editRule: async text => {
			if (text === '2') {
				return '不能输入该值';
			}
			return '';
		},
		width: 200,
	},
	{
		title: '数字输入框',
		dataIndex: 'id',
		edit: true,
		editRule: true,
		editComponent: 'InputNumber',
		width: 200,
		editComponentProps: () => {
			return {
				max: 100,
				min: 0,
			};
		},
		editRender: ({ text }) => {
			return h(Progress, { percent: Number(text) });
		},
	},
	{
		title: '下拉框',
		dataIndex: 'name3',
		edit: true,
		editComponent: 'Select',
		editComponentProps: {
			options: [
				{
					label: 'Option1',
					value: '1',
				},
				{
					label: 'Option2',
					value: '2',
				},
			],
		},
		editDynamicDisabled: ({ record }) => record.value == 2,
		width: 200,
	},
	{
		title: '远程下拉',
		dataIndex: 'name4',
		edit: true,
		editComponent: 'ApiSelect',
		editComponentProps: {
			api: getBigTypes,
			resultField: 'list',
			labelField: 'name',
			valueField: 'id',
		},
		width: 200,
	},
	{
		title: '远程下拉树',
		dataIndex: 'name71',
		edit: true,
		editComponent: 'ApiTreeSelect',
		editRule: false,
		editComponentProps: {
			api: getPrincipaltree,
			resultField: 'data',
			fieldNames: { label: 'name', key: 'deptId', value: 'name' },
		},
		width: 200,
	},
	{
		title: '日期选择',
		dataIndex: 'date',
		edit: true,
		editComponent: 'DatePicker',
		editComponentProps: {
			valueFormat: 'YYYY-MM-DD',
			format: 'YYYY-MM-DD',
		},
		width: 200,
	},
	{
		title: '时间选择',
		dataIndex: 'time',
		edit: true,
		editComponent: 'TimePicker',
		editComponentProps: {
			valueFormat: 'HH:mm',
			format: 'HH:mm',
		},
		width: 200,
	},
	{
		title: '勾选框(显示图标)',
		dataIndex: 'name5',
		edit: true,
		editIcon: true,
		editComponent: 'Checkbox',
		editValueMap: value => {
			return value ? '是' : '否';
		},
		width: 200,
	},
	{
		title: '开关',
		dataIndex: 'name6',
		edit: true,
		editComponent: 'Switch',
		editValueMap: value => {
			return value ? '开' : '关';
		},
		width: 200,
	},
];
export default defineComponent({
	components: { BasicTable },
	setup() {
		const [registerTable] = useTable({
			title: '可编辑单元格示例',
			api: demoListApi,
			columns: columns,
			showIndexColumn: false,
		});

		const { createMessage } = useMessage();

		function handleEditEnd({ record, index, key, value }: Recordable) {
			console.log(record, index, key, value);
			return false;
		}

		// 模拟将指定数据保存
		function feakSave({ value, key, id }) {
			createMessage.loading({
				content: `正在模拟保存${key}`,
				key: '_save_fake_data',
				duration: 0,
			});
			return new Promise(resolve => {
				setTimeout(() => {
					if (value === '') {
						createMessage.error({
							content: '保存失败：不能为空',
							key: '_save_fake_data',
							duration: 2,
						});
						resolve(false);
					} else {
						createMessage.success({
							content: `记录${id}的${key}已保存`,
							key: '_save_fake_data',
							duration: 2,
						});
						resolve(true);
					}
				}, 2000);
			});
		}

		async function beforeEditSubmit({ record, index, key, value }) {
			console.log('单元格数据正在准备提交', { record, index, key, value });
			return await feakSave({ id: record.id, key, value });
		}

		function handleEditCancel() {
			console.log('cancel');
		}

		return {
			registerTable,
			handleEditEnd,
			handleEditCancel,
			beforeEditSubmit,
		};
	},
});
</script>
